<template>
  <div class="msg-index">
    <el-form
      ref="form"
      label-position="left"
      :rules="rules"
      :model="form"
      label-width="150px"
    >
    <el-form-item label="需求部门" prop="needsDepartment">
        <el-input
          v-model="form.needsDepartment"
        ></el-input>
      </el-form-item>
      <el-form-item label="准时交货情况" prop="opinionTimeDelivery">
        <el-rate
          style="margin-top: 8px"
          v-model="form.opinionTimeDelivery"
        ></el-rate>
      </el-form-item>
      <el-form-item label="质量情况" prop="opinionQuality">
        <el-rate style="margin-top: 8px" v-model="form.opinionQuality"></el-rate>
      </el-form-item>
      <el-form-item label="过程配合情况" prop="opinionProcess">
        <el-rate
          style="margin-top: 8px"
          v-model="form.opinionProcess"
        ></el-rate>
      </el-form-item>
      <el-form-item label="动态平均得分" prop="averageScore">
        <el-rate
          disabled
          style="margin-top: 8px"
          v-model="averageNum"
          :show-score="averageNum"
        ></el-rate>
      </el-form-item>
      <el-form-item label="需求单位意见" prop="needsOpinion">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows: 4 }"
          placeholder="请输入需求单位意见"
          v-model="form.needsOpinion"
        ></el-input>
      </el-form-item>
        <el-button type="primary" @click="submitData">确认评价</el-button>
    </el-form>
  </div>
</template>

<script>
import { orderOver } from "@/api/evaluate/api";
export default {
  computed: {
    averageNum: {
      get() {
        return (
          Math.round((
            this.form.opinionTimeDelivery +
              this.form.opinionQuality +
              this.form.opinionProcess 
          ) / 3*100)/100
        );
      },
      set(val) {
        this.averageNum = val;
      },
    },
    // "form.averageScore"(val){
    //   console.log('val',val)
    // }
  },
  data() {
    return {
      form: {
        opinionTimeDelivery: 0,
        opinionQuality: 0,

        opinionProcess: 0,
        averageScore: 0,
        needsOpinion: "",
        orderId: "",
        evaluateType: "需求",
      },
      rules: {
        needsDepartment:[
          { required: true, message: "需求部门不能为空", trigger: "blur" },
        ],
        needsOpinion: [
          { required: true, message: "需求单位意见不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods:{
    /** 提交按钮 */
    submitData() {
      var r = window.location.search
      const params = new URLSearchParams(r)
      const orderId = params.get('orderId')
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const form = {}
          form.averageScore = this.averageNum
          form.opinionTimeDelivery = this.form.opinionTimeDelivery
          form.opinionQuality = this.form.opinionQuality
          form.opinionProcess = this.form.opinionProcess
          form.needsOpinion = this.form.needsOpinion
          form.orderId = orderId
          form.evaluateType = this.form.evaluateType
          orderOver(form).then(()=>{
            this.$message({
            type: 'success',
            message: '评价成功'
          });
          })
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.msg-index{
  margin: 20px;
}
</style>